<template lang="pug">
.mall-detail
  .detail-content
    .detail-section.detail-boder
      .detail-section-left
        .detail-imgs
          .detail-img
            img(:src="viewImg | filterSrc")
          .detail-img-list(ref="imgList")
            .detail-img-item(v-for="item in detail.fileGridMapping", @mouseenter="enter(item.fileUrl)", :class="{'detail-img_active' : item.fileUrl === viewImg}")
              img(:src="item.fileUrl | filterSrc" @click="changeImg(item.fileUrl)")
        .detail-select
          .detail-goods_name {{detail.name}}
          .detail-goods-styles
            .style-item(v-for="item in detail.styles") {{item.styleName}}
          .detail-price
            //- .detail-price-item
              .price-item-label 市场价
              .price-item-num &#165{{price.marketPrice}}
            .detail-price-item
              .price-item-label 市场价：
              .price-item-selling &#165{{price.marketPrice}}
            .detail-info-item
              .info-item-label 供货周期
              .info-item-bd {{detail.supplyCycle}}天
            .detail-info-item
              .info-item-label 预计送样时间
              .info-item-bd {{detail.serviceTime}}天
            .detail-info-item
              .info-item-label 库存情况
              .info-item-bd {{price.stock}}件
          .detail-select-items
            .detail-select-item(v-for="item, index in detail.spec")
              .select-item-label {{item.name}}
              .select-item_content
                .select-item_select(v-for="row in item.specItem" @click="selectSpec(row, index)", :class="{'select-item_active' : item.activeId === row.id}")
                  .select-item_select_img(v-if="row.fileUrl")
                    img(:src="row.fileUrl | filterSrc")
                  span {{row.value}}
            //- .detail-select-item.detail-select-item_num
              .select-item-label 数量
              .select-item_content
                el-input-number(v-model="count", :min="1", :max="price.storeCount")
              .select-item-info 件 (库存{{price.storeCount}}件)
            //- .detail-select-footer
              el-button(name="orgin" @click="nowBuy", :disabled="!price.storeCount") 立即购买
              el-button(type="danger" @click="addCart", :disabled="!price.storeCount") 加入购物车
      //- .detail-section-right
        //- .detail-company-header
          .detail-company-name {{detail.brand_name}}
        .detail-company-info
          .detail-company-logo
            img(:src="detail.brand.logo")
          .detail-suppliers_name {{detail.brand.name}}
          //- .detail-suppliers_btn
            el-button(size="mini" type="primary" @click="goShopping") 进店逛逛
          .detail-supplier-item
            .supplier-item-label 客服电话：
            .supplier-item-value {{detail.supplier.mobile}}
          .detail-supplier-item
            .supplier-item-label 客服QQ：
            .supplier-item-value {{detail.supplier.qq}}
          .detail-supplier-item
            .supplier-item-label 公司地址：
            .supplier-item-value {{detail.supplier.address}}
    .detail-boder(v-if="detail.params.length")
      .goods-detail-title 材料详情
      .goods-detail-content
        .goods-brand_name 品牌：{{detail.brand_name}}
        .goods-product_params
          .product_params-title 产品参数
          .product_params-contnet
              .product_params-item
                .product_params-item-label 材料名称：
                .product_params-item-value(:title="detail.name") {{detail.name}}
              .product_params-item
                .product_params-item-label 使用业态：
                .product_params-item-value
                  span(v-for="item in detail.styles") {{item.styleName}}
              .product_params-item
                .product_params-item-label 材料型号：
                .product_params-item-value(:title="detail.materialModel") {{detail.materialModel}}
              .product_params-item
                .product_params-item-label 生产产地：
                .product_params-item-value(:title="detail.address") {{detail.address}}
              .product_params-item(v-for="row in detail.params")
                .product_params-item-label {{row.attributeName}}：
                .product_params-item-value(:title="row.attributeValue") {{row.attributeValue}}
    .detail-boder.detail-footer-imgs
      .detail-footer-img(v-for="item in detail.materialDetail")
        //-.detail-goods-text(v-if="item.type === 'text'") {{item.content}}
        //-.detail-goods-video(v-if="item.type === 'video'")
          video(:src="item.content" controls="controls")
        .detail-goods-img
          img(:src="item.fileUrl | filterSrc")
</template>

<script>
import viewHeader from '@/components/viewHeader'
import { getPreviewMaterialDetail } from 'api'
import { mapActions } from 'vuex'
export default {
  name: 'mallDetail',
  data () {
    return {
      title: '商品详情',
      goodsId: '',
      viewImg: '',
      detail: {
        brand: {
          logo: '',
          name: ''
        },
        supplier: {
          suppliers_name: '',
          suppliers_logo: ''
        },
        params: []
      },
      specKeys: [],
      price: {
        marketPrice: '', // 市场价
        finalPrice: '', // 成交价
        stock: 0 // 库存
      }
    }
  },
  components: {
    viewHeader
  },
  methods: {
    ...mapActions([
      'getDropdown'
    ]),
    async goodsInfo () {
      try {
        const { ResultSet } = await this.$axios.post(getPreviewMaterialDetail, { content: { materialId: this.$route.params.id } })
        let newForm = { ...ResultSet.userData.Material, ...ResultSet.userData, country: ResultSet.userData.Material.country + '' }
        let addressList = await this.getDropdown({key: 'region_countries'})
        let address = addressList.filter(item => {return item.keyColumn === newForm.country})
        newForm.address = address[0].valueColumn
        newForm.spec.map((item, index) => { item.activeId = '' })
        this.viewImg = newForm.fileGridMapping[0].fileUrl
        this.price.marketPrice = newForm.maxMarketPrice === newForm.minMarketPrice ? newForm.maxMarketPrice : `${newForm.minMarketPrice}~${newForm.maxMarketPrice}`
        this.detail = newForm
      } catch (err) {
        console.log(err)
        // this.$router.back()
        this.$message.error(msg)
      }
    },
    enter (img) {
      this.viewImg = img
    },
    changeImg (img) {
      this.viewImg = img
    },
    selectSpec (row, index) {
      this.detail.spec.map(item => item.specItem.map(v => {
        if (row.id === v.id) {
          item.activeId = row.id
          if (row.fileUrl) this.viewImg = row.fileUrl
        }
      }))
      this.specKeys[index] = row.id
      let newSpecKeys = Array.from(this.specKeys)
      let valid = []
      newSpecKeys.forEach(item => {
        if (item !== undefined) {
          valid.push(item)
        }
      })
      if (valid.length === this.detail.spec.length) {
        this.key = Array.from(new Set(this.specKeys)).sort((a, b) => { return a - b }).join('_')
        let newPrice = this.detail.specValue.find(item => item.specKey === this.key)
        this.price.minMarketPrice = newPrice.minMarketPrice
        this.price.maxMarketPrice = newPrice.maxMarketPrice
        this.price.finalPrice = newPrice.finalPrice
        this.price.stock = newPrice.stock
      }
    },
    // 查找选择后价格发生变化的数据
    changePrice (data) {
      if (this.specKeys.length === data.spec.length) {
        this.key = Array.from(new Set(this.specKeys)).sort((a, b) => { return a - b }).join('_')
        let newPrice = data.specValue.find(item => item.specKey === this.key)
        this.price.marketPrice = newPrice.marketPrice
        this.price.finalPrice = newPrice.finalPrice
        this.price.stock = newPrice.stock
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.goodsId = to.params.id
      vm.goodsInfo()
    })
  }
}
</script>
<style lang="scss" scoped>
.mall-detail {
  min-width: 1400px;
}
.detail-content {
  margin: 20px 0;
  padding: 30px 0;
  background: #fff;
}
.detail-section {
  display: flex;
}
.detail-boder {
  width: 1400px;
  margin: 0 auto 20px;
  border: 1px solid #ddd;
}
.detail-section-left {
  padding: 30px;
  display: flex;
}
.detail-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 580px;
  height: 420px;
}
.detail-imgs img {
  max-width: 100%;
  max-height: 100%;
}
.detail-img-list {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0 20px;
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.detail-img-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 100px;
  margin-right: 14px;
  cursor: pointer;
  border: 2px solid transparent;
}
.detail-img-item img {
  max-width: 100%;
  max-height: 100%;
}
.detail-goods_name {
  font-size: 24px;
  font-weight: bold;
  color: #363636;
  word-break: break-word;
}
.detail-goods-styles {
  margin-top: 20px;
  display: flex;
  align-items: center;
  .style-item {
    padding: 6px 12px;
    background: #F3F3F3;
    border-radius: 20px;
    color: #787878;
    font-size: 12px;
    margin-right: 10px;
  }
}
.detail-price {
  margin-top: 60px;
}
.detail-price-item {
  display: flex;
  align-items: center;
  line-height: 1.7;
}
.price-item-label {
  margin-right: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #FF2E42;
}
.price-item-num {
  font-size: 18px;
  font-weight: bold;
  color: #FF2E42;
}
.price-item-selling {
  font-size: 18px;
  font-weight: bold;
  color: #FF2E42;
}
.detail-info-item {
  margin-top: 20px;
  display: flex;
  align-items: center;
  color: #545454;
  font-size: 14px;
  .info-item-label {
    margin-right: 10px;
  }
}
.detail-select {
  margin-left: 40px;
}
.detail-select-items {
  margin-top: 60px;
}
.detail-select-item {
  margin-bottom: 20px;
  font-size: 14px;
  color: #333333;
}
.detail-select-item,
.select-item_content {
  display: flex;
}
.select-item_content {
  flex-wrap: wrap;
}
.select-item-label {
  width: 100px;
  min-width: 100px;
  padding: 10px 0;
  color: #666666;
}
.detail-img_active {
  border: 2px solid #e53e41;
}
.select-item_select {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  margin: 0 10px 10px 0;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  cursor: pointer;
}
.select-item_select_img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 10px;
  img {
    max-width: 30px;
    max-height: 30px;
  }
}
.select-item-info {
  padding: 10px;
  font-size: 14px;
  color: #666666;
}
.detail-select-footer {
  padding: 0 20px;
}
.detail-select-footer .el-button[name="orgin"] {
  background: #FF6C00;
  border-color: #FF6C00;
  color: #fff;
}
.detail-select-footer .el-button[disabled="disabled"] {
  background: #999;
  border-color: #999;
  color: #fff;
}
.detail-section-right {
  width: 250px;
  min-width: 250px;
}
.detail-company-header {
  display: flex;
  min-width: 331px;
  height: 85px;
  padding: 28px 20px;
  background: #EFEFEF;
  justify-content: space-between;
}
.detail-company-name {
  font-size: 18px;
  color: #333333;
}
.detail-company-logo {
  margin: 30px auto 20px;
}
.detail-company-logo,
.detail-company-logo img{
  width: 100px;
  height: 100px;
}
.detail-suppliers_name {
  margin-bottom: 30px;
  font-size: 16px;
  color: #333;
  text-align: center;
}
.detail-company-info {
  padding: 0 20px;
}
.detail-supplier-item {
  display: flex;
  align-items: flex-start;
}
.supplier-item-label,
.supplier-item-value{
  font-size: 14px;
  line-height: 30px;
}
.supplier-item-label {
  min-width: 75px;
  color: #999999;
}
.supplier-item-value {
  color: #151515;
}
.goods-detail-title {
  height: 44px;
  width: 100%;
  line-height: 44px;
  padding: 0 30px;
  background: #EFEFEF;
}
.goods-detail-content {
  padding: 30px;
  font-size: 12px;
  color: #333333;
}
.goods-product_params {
  margin-top: 30px;
}
.product_params-title {
  margin-bottom: 10px;
  color: #999999;
}
.detail-footer-imgs {
  padding: 30px 0 0;
  text-align: center;
}
.detail-footer-img img {
  height: 100%;
}
.select-item_active {
  border-color: #FF6C00;
  color: #FF6C00;
}
.product_params-contnet {
  display: flex;
  flex-wrap: wrap;
}
.product_params-items {
  margin-right: 60px;
}
.product_params-item {
  width: 25%;
  display: flex;
  line-height: 30px;
  & .product_params-item-label {
    min-width: 100px;
    color: #999;
    flex-shrink: 0;
  }
  & .product_params-item-value {
    max-width: 240px;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    color: #151515;
    span {
      margin-right: 5px;
    }
  }
}
 .product_params-item-label {
    min-width: 100px;
    color: #999;
    flex-shrink: 0;
  }
  .product_params-item-value {
    max-width: 240px;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    color: #151515;
  }
.detail-goods-text {
  font-size: 20px;
}
.detail-goods-video {
  width: 750px;
  margin: 0 auto;
}
.detail-suppliers_btn {
  margin: 20px 0 60px;
  text-align: center;
}
</style>
